<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="css/galleriffic.css"/>
    <style type="text/css">
    body div#menu a {
        color: white;
        text-decoration: none;
    }
    body div#menu a:hover {
        color: red;
        text-shadow: aqua;
        font-style: italic;
    }
    div.navigation{
        width:350px;
        float: left;
    }
    div.content{
        display:block;
        width:850px;
    }
    div.content a, div.navigation a {
        color: white;
    }
    #folderName {
        font-size: 150%;
        font-weight: bold;
    }
    </style>
    <jsp:include page="common.jsp"/>
    
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    <script type="text/javascript">
    var gallerific_inited = false; 
    function initGallerific(totalPhoto) {
    	var onMouseOutOpacity = 0.67;
        $('#photoList ul.thumbs li').css('opacity', onMouseOutOpacity)
            .hover(
                function () {
                    $(this).not('.selected').fadeTo('fast', 1.0);
                }, 
                function () {
                    $(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
                }
            );
        
        var gallery = $('#gallery-adv').galleriffic('#photoList', {
            delay:                  2000,
            numThumbs:              12,
            preloadAhead:           12,
            enableTopPager:         false,
            enableBottomPager:      true,
            imageContainerSel:      '#slideshow-adv',
            controlsContainerSel:   '#controls-adv',
            // captionContainerSel:    '#caption-adv',
            loadingContainerSel:    '#loading-adv',
            renderSSControls:       false,
            renderNavControls:      true,
            //playLinkText:           'Play Slideshow',
            //pauseLinkText:          'Pause Slideshow',
            prevLinkText:           '&lsaquo; Pr&eacute;c&eacute;dent',
            nextLinkText:           'Suivant &rsaquo;',
            nextPageLinkText:       'Page suivante &rsaquo;',
            prevPageLinkText:       '&lsaquo; Page pr&eacute;c&eacute;dente',
            enableHistory:          false,
            autoStart:              false,
            onChange:               function(prevIndex, nextIndex) {
             $('#photoList ul.thumbs').children()
                 .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                 .eq(nextIndex).fadeTo('fast', 1.0);
         },
         /*onTransitionOut:        function(callback) {
             $('#slideshow-adv, #caption-adv').fadeOut('fast', callback);
         },*/
         onTransitionIn:         function() {
             $('#slideshow-adv, #caption-adv').fadeIn('fast');
         },
         onPageTransitionOut:    function(callback) {
             $('#photoList ul.thumbs').fadeOut('fast', callback);
         },
         onPageTransitionIn:     function() {
             $('#photoList ul.thumbs').fadeIn('fast');
         }

        });
    }

    function showPhotos(folderId) {
        $.ajax({
        	url : '/photo?findByFolder=&limit=12&folder=' + folderId,
            dataType : 'json',
            timeout : 5000,
            success : function(json) {
                if (json.success) {
                    if (json.photos) {
                    	addPhotoList(json.photos);
                    }
                } else {
                    alert(json.error);
                }
            },
            error : function(request, status, error) {
                alert('error : ' + request.responseText);
            }   
        });
    }
    
    $(document).ready(function() {
        showPhotos('${actionBean.folder.id}');
    });
    </script>
</head>
<body>
    <div style="margin: 0px;" id="menu"><a href="/">&lt;&lt; Retour à l'accueil</a><div id="folderName">Folder ${actionBean.folder.name}</div></div>
    <div style="width: 1200px;">
        <div id="gallery-adv" class="content">
           <div id="controls-adv" class="controls"></div>
           <div id="loading-adv" class="loader"></div>
           <div id="slideshow-adv" class="slideshow"></div>
           <!-- <div id="caption-adv" class="embox"></div> -->
       </div>
       <div id="photoList" class="navigation"></div>
       <div class="clear"/>
    </div>
</body>
</html>